<!--
 * @Descripttion: 
 * @version: 
 * @Author: 穆宏宇
 * @Date: 2020-11-03 18:51:00
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-11 10:20:04
-->
<template>
     <el-image
      class="common-img"
      :class="size"
      :src="url"
      :fit="fit"
      :preview-src-list="[url]"
    >
    </el-image>
</template>

<script>
import { getFileUrl } from "@/api/common.api";
export default {
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    },
    fit: {
      type: String,
      default () {
        return 'contain'
      }
    },
    size: {
      type: String,
      default () {
        return ''
      }
    },
    fileType: {
      type: Number,
      default () {
        return 17
      }
    },
  },
   data () {
     return {
       url: ''
     }
   },
   mounted(){
    this.getFileUrlFn(this.id)
   },
  watch: {
    id(val){
      this.getFileUrlFn(val)
    }
  },
   methods: {
    getFileUrlFn(fileId) {
      if (fileId) {
        getFileUrl(this.fileType, fileId).then((res) => {
          this.url = res
        }).catch(err=>{
          this.url = ''
        })
      }
    },
   }
}
</script>

<style scoped lang='scss'>
.common-img{
  width: 150px; 
  height: 150px;
  // background: #F5F7FA;
  &.mini{
    width: 80px; 
    height: 80px;
  }
}
 
</style>
